{% extends 'base.html' %}
{% load static %}
{% block title %}
    漏洞解决时间预测
{% endblock %}

{% block css %}
    <link rel="stylesheet"  href="{% static 'css/bootstrap-datepicker.css' %}">
{% endblock %}

{% block nav_list %}
    <li><a href="/list/">列表筛选视图</a></li>
    <li><a href="/overlook/">可视化数据概览</a></li>
    <li><a href="/chart/">可视化大数据分析</a></li>
    <li class="active"><a href="/predict/">漏洞解决时间预测</a></li>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="panel panel-info">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                漏洞解决时间预测
            </div>
            <div class="panel-body">
                <form class="form">
                    {% csrf_token %}
                    <div class="form-group">
                        <label class="text" for="severity">选择漏洞等级</label>
                        <select class="form-control" id="severity" name="severity">
                            {{ severity_option_html }}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="text" for="v_type">选择漏洞类型</label>
                        <select class="form-control" id="v_type" name="v_type">
                            {{ type_option_html }}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="text" for="published">漏洞发布时间</label>
                        <input class="form-control date-picker" type="text" id="published" name="published" value="{{ published }}">
                    </div>
                    <a class="btn btn-warning" href="/predict/">清除</a>&nbsp;&nbsp;
                    <button type="submit" class="btn btn-info">预测</button>
                    &emsp;&emsp;
                    <span class="form-control-static">
                        预计解决时间：<span class="text-danger">{{ res_date }}</span>
                    </span>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'js/bootstrap-datepicker.js' %}"></script>
    <script>
        $(function() {
            //年-月-日格式
            $('#published').datepicker({
                format: 'yyyy-mm-dd', //格式
                startDate: '2023' + '-01-01', //开始时间
                endDate: '{{ today }}', //结束时间
                autoclose: true, //选中之后自动隐藏日期选择框
                todayHighlight: true, //当日  高亮  自动定位到当日
                language: 'zh-CN', //语言
                orientation: 'button'
            });
        })
    </script>
{% endblock %}